<template>
  <div ref="refCanvas" class="canvas-content"></div>
</template>

<script>
import { toolType } from "../js/pxCanvas/tools/index";
import PxCanvas from "../js/pxCanvas/index";

export default {
  data() {
    return {
      width: 32,
      height: 32,
      resolution: 1,
      pxCanvas: null,
      scale: 1,
      plugs: ["drawImage", "mouseWheel"],
    };
  },
  mounted() {
    this.createPxCanvas();
    this.$bus.$on("export", this.exportCanvas);
    this.$bus.$on("tool", this.changeTool);
    this.$bus.$on("color", this.changeColor);
    this.$bus.$on("clear", this.clear);
    this.$bus.$on("drawImage", this.drawImage);
    this.$bus.$on("cancel", this.cancel);
    this.$bus.$on("redo", this.redo);
    this.$bus.$on("scale", this.setScale);
    this.$bus.$on("new", this.newCreate);
    this.$bus.$on("changSize",this.setSize)
    window.addEventListener("resize",()=>{
      this.setMargin();
    })
  },
  watch: {
    scale(v) {
      this.scale = Math.min(2, Math.max(1, v));
      this.setMargin();
    },
  },
  methods: {
    newCreate(options) {
      this.pxCanvas.destroy();
      this.width = options.width;
      this.height = options.height;
      this.scale = 1;
      this.resolution = 1;
      this.createPxCanvas();
    },
    setMargin() {
      let _view_style = this.pxCanvas.app.view.style;
      _view_style.width = this.width * this.resolution * this.scale + "px";
      _view_style.height = this.height * this.resolution * this.scale + "px";
      let H = this.$refs.refCanvas.clientHeight;
      let h = parseInt(_view_style.height, 10);
      if (isNaN(h)) h = H * 0.9;
      if (h < H) {
        _view_style.margin = `${(H - h) / 2 - 5}px auto`;
      } else {
        _view_style.margin = `0 0`;
      }
    },
    setSize(size){
      this.pxCanvas.setSize(size)
    },
    setScale({ type, n }) {
      if (type == "change") {
        this.scale = (this.scale * 10 + n * 10) / 10;
      }
    },
    createPxCanvas() {
      let num = this.$refs.refCanvas.clientWidth;
      let v = this.width;
      if (
        this.$refs.refCanvas.clientHeight < this.$refs.refCanvas.clientWidth
      ) {
        num = this.$refs.refCanvas.clientHeight;
        v = this.height;
      }
      this.resolution = (num * 0.9) / v;
      this.pxCanvas = new PxCanvas({
        el: this.$refs.refCanvas,
        height: this.height,
        width: this.width,
        resolution: this.resolution,
        toolSelect: toolType.PEN,
        plugs: this.plugs,
        updateSuccess: (data) => {
          this.$bus.$emit("canvasInfo",data);
          this.$bus.$emit("draw", {
            width:this.width,
            height:this.height,
            data:data.pxMap
          });
        },
      }).init();
      this.pxCanvas.on("changeColor", (colors) => {
        this.$bus.$emit("changeColor", colors);
      });
      this.$bus.$emit("canvasInfo",this.pxCanvas);
      this.pxCanvas.on("pointerMove", main => {
       this.$bus.$emit("canvasInfo", main);
      });
      this.pxCanvas.extend.mouseWheel((e, type) => {
        this.setScale({
          type: "change",
          n: 0.01 * (type == "down" ? -1 : 1),
        });
      });
      this.setMargin();
      this.setSize(1);
    },
    exportCanvas(type) {
      let code =  this.pxCanvas.export(type);
      if(typeof code == "string"){
        this.$bus.$emit("openCodeShow",{
          type,
          code
        })
      }
      
    },
    changeTool(type) {
      this.pxCanvas.setToolType(type);
    },
    changeColor({ color = "", type }) {
      this.pxCanvas.setColor(color.toString().replace("#", "0x"), type);
    },
    clear() {
      this.pxCanvas.clear();
    },
    cancel() {
      this.pxCanvas.cancel();
    },
    redo() {
      this.pxCanvas.redo();
    },
    drawImage(img) {
      this.pxCanvas.extend.drawImage(img);
    },
  },
};
</script>

<style lang="scss">
.canvas-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  text-align: center;
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: #ededed;
  }
  &::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
  }

  canvas {
    position: relative;
    margin: 0 auto;
    vertical-align: bottom;
  }
}
</style>